<template>
  <div class="x-unit" @click.self="closeMask" :style="{ height: `${deviceH}px` }">
    <div class="unit-ctx" :style="{ 'background-image': `url(${modelBg})` }">
      <div style="display:flex;margin-top:20px;">
        <div class="ctx-title" :class="{ isActive: tabbarIndex === 0 }" @click="changeTab(0)">物联设备</div>
        <div class="ctx-title" :class="{ isActive: tabbarIndex === 1 }" @click="changeTab(1)">人脸抓拍</div>
        <div class="ctx-title" :class="{ isActive: tabbarIndex === 2 }" @click="changeTab(2)">车辆抓拍</div>
        <div class="ctx-title" :class="{ isActive: tabbarIndex === 3 }" @click="changeTab(3)">视频监控</div>
      </div>

      <div class="ctx-info" v-show="tabbarIndex==0">
        <div class="info-type">
          <div class="type-title" style="cursor: pointer;" @click="slecttype()">设备总数-{{ alltotal }}</div>
          <ul v-if="LotTypeEchartsData.length" class="type-list">
            <li
              v-for="item in LotTypeEchartsData"
              :key="item.name"
              class="type-list-rs"
              @click="slecttype(item.name)"
              v-if="item.value>0"
              style="cursor: pointer;"
            >
              <div class="rs-name">
                <span class="name">{{ item.name }}</span>
                <span class="number">{{ item.value }}</span>
              </div>
              <div class="rs-process">
                <div
                  class="process"
                  :style="{ width: `${(item.value>total)?'100%':(item.value / alltotal) * 100}%` }"
                ></div>
              </div>
            </li>
          </ul>
        </div>
        <div class="info-table">
          <div class="table-rs">

            <ul class="table-list">
              <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-name">设备ID</div>
                <div class="item-name">设备类型</div>
                <div class="item-post">位置</div>
                <div class="item-phone">状态</div>
                <!-- <div class="item-state">IP地址</div> -->
              </li>
              <li
                v-for="item,i in LotPageEchartsData"
                :key="item.id"
                class="list-item"
                @click="picshow(item.deviceType)"
                style="cursor:pointer;"
              >
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-name">{{ item.deviceId }}</div>
                <div class="item-name">{{ item.deviceName }}</div>
                <div class="item-post">{{ item.addressDescription }}</div>
                <div class="item-phone">{{ item.deviceState }}</div>
                <!-- <div class="item-state">{{item.deviceState}}</div> -->
              </li>
            </ul>
          </div>
          <div v-if="allpage > 0" class="table-footer">
            <x-page
            :currentPage="pageNum"
              @currentChange="currentChange"
              :page-size="5"
              :allpage="allpage"
              :total-num="false"
            />
          </div>
        </div>
      </div>
      <div class="ctx-info" v-if="tabbarIndex==1">
         <div class="info-table">
          <div class="table-rs">

            <ul class="table-list">
              <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-name">设备ID</div>
                <div class="item-name">设备类型</div>
                <div class="item-post">位置</div>
                <div class="item-phone">状态</div>
              </li>
              <li
                v-for="item,i in anfanglist"
                :key="item.id"
                class="list-item"
                style="cursor:pointer;"
              >
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-name">{{ item.deviceId }}</div>
                <div class="item-devicename">{{ item.deviceName }}</div>
                <div class="item-post">{{ item.address }}</div>
                <div class="item-phone">{{ item.deviceState }}</div>
                <!-- <div class="item-state">{{item.deviceState}}</div> -->
              </li>
            </ul>
          </div>
          <div v-if="allpage > 0" class="table-footer">
            <x-page
            :currentPage="pageNum1"
              @currentChange="currentChange1"
              :page-size="5"
              :allpage="allpage1"
              :total-num="false"
            />
          </div>
        </div>
      </div>
      <div class="ctx-info" v-if="tabbarIndex==2">
         <div class="info-table">
          <div class="table-rs">

            <ul class="table-list">
              <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-name">设备ID</div>
                <div class="item-name">设备类型</div>
                <div class="item-post">位置</div>
                <div class="item-phone">状态</div>
              </li>
              <li
                v-for="item,i in anfanglist"
                :key="item.id"
                class="list-item"
                style="cursor:pointer;"
              >
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-name">{{ item.deviceId }}</div>
                <div class="item-devicename">{{ item.deviceName }}</div>
                <div class="item-post">{{ item.address }}</div>
                <div class="item-phone">{{ item.deviceState }}</div>
                <!-- <div class="item-state">{{item.deviceState}}</div> -->
              </li>
            </ul>
          </div>
          <div v-if="allpage > 0" class="table-footer">
            <x-page
            :currentPage="pageNum1"
              @currentChange="currentChange1"
              :page-size="5"
              :allpage="allpage1"
              :total-num="false"
            />
          </div>
        </div>
      </div>
      <div class="ctx-info" v-if="tabbarIndex==3">
         <div class="info-table">
          <div class="table-rs">

            <ul class="table-list">
              <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-name">设备ID</div>
                <div class="item-name">设备类型</div>
                <div class="item-post">位置</div>
                <div class="item-phone">状态</div>
              </li>
              <li
                v-for="item,i in anfanglist"
                :key="item.id"
                class="list-item"
                style="cursor:pointer;"
              >
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-name">{{ item.deviceId }}</div>
                <div class="item-devicename">{{ item.deviceName }}</div>
                <div class="item-post">{{ item.address }}</div>
                <div class="item-phone">{{ item.deviceState }}</div>
                <!-- <div class="item-state">{{item.deviceState}}</div> -->
              </li>
            </ul>
          </div>
          <div v-if="allpage > 0" class="table-footer">
            <x-page
            :currentPage="pageNum1"
              @currentChange="currentChange1"
              :page-size="5"
              :allpage="allpage1"
              :total-num="false"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" v-dialogDrag class="jk-dialog" width="50%">
      <div style="width:786px;height:432px;margin:auto">
        <img :src="picurl |filterimgsrc" alt style="height:100%" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  GetSecurityTotleAndType,
  GetSecurityInfoForPage,
  GetDevSens,
  GetDevSensorForPage,
  GetDictDataEnum,
  GetCamerInfoForPage1
} from "@/api/peopleApi";
import { DevicesTypes } from "@/api/device";
import XPage from "@/components/xpage";
import XSelect from "@/components/xselect";
export default {
  name: "xlotmodel",
  props: {
    id: {
      type: String,
      default: ""
    },
    code: {
      type: String,
      default: ""
    }
  },
  computed: {},
  data() {
    return {
      modelBg: require("@/assets/images/modelBg.png"),
      deviceH: 0,
      pageSize: 12,
      pageNum: 1,
      height: 400,
      LotTypeEchartsData: [],
      LotPageEchartsData: [],
      total: 0,
      allpage: 0,
      unitTypeName: "",
      unitType: "",
      unitTypeList: [],
      alarmcodeJson: DevicesTypes(),
      alltotal: 0,
      picurl: "",
      dialogVisible: false,
      tabbarIndex: 0,
      pageSize1: 12,
      pageNum1: 1,
      anfanglist:[],
      alltotal1: 0,
      allpage1: 0,
      typeId:1
    };
  },
  components: {
    XPage,
    XSelect
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
  },
  mounted() {
    Promise([
      this.GetSecurityData(),
      this.GetDictDataEnumList(),
      this.GetAnfangData()
    ]);
    // this.GetSecurityData();
  },
  methods: {
    changeTab(index) {
      if (index > 0) {
        this.pageNum1 = 1;
        this.typeId=index
        this.GetAnfangData();
      } else {
        this.pageNum = 1;
      }
      this.tabbarIndex = index;
    },
    async GetSecurityData() {
      try {
        let camerquery = {
          code: this.code,
          id: this.id
        };
        let pagequery = {
          code: this.code,
          id: this.id,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          deviceType: this.unitType
        };
        var LotTypeEchartsData = await GetDevSens(camerquery);
        this.LotTypeEchartsData = LotTypeEchartsData.splice(
          0,
          LotTypeEchartsData.length - 1
        );
        // console.log(this.LotTypeEchartsData);
        const res = await GetDevSensorForPage(pagequery);
        console.log(res);
        if (this.unitType == "") {
          this.alltotal = res.data.total;
        }
        this.total = res.data.total;
        this.LotPageEchartsData = res.data.list;
        this.allpage = Math.ceil(this.total / this.pageSize);
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    async GetAnfangData() {
      try {
        let pagequery = {
          code: this.code,
          pageNum: this.pageNum1,
          pageSize: this.pageSize1,
          typeId:this.typeId
        };
        console.log(pagequery);
        var res = await GetCamerInfoForPage1(pagequery);
        this.anfanglist=res.data.list
        this.total1 = res.data.total;
        this.allpage1 = Math.ceil(this.total1 / this.pageSize1);
        console.log(res);
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    picshow(deviceType) {
      //console.log("++++" + deviceType)
      let url = "";
      try {
        url = require("@/assets/images/wlsb/devtype-" + deviceType + ".png");
        this.picurl = url;
        this.dialogVisible = !this.dialogVisible;
      } catch (e) {}
    },
    //关闭
    closeMask() {
      this.$emit("closeMask");
    },
    //分页
    currentChange(n) {
      this.pageNum = n;
      this.GetSecurityData();
    },
    currentChange1(n){
      this.pageNum1 = n;
      this.GetAnfangData();
    },
    //搜索
    searchEvent() {
      this.GetSecurityData();
    },
    //选择下拉框
    selectItem(name, id) {
      this.unitTypeName = name;
      this.unitType = id;
    },
    //获取类型
    async GetDictDataEnumList() {
      var data = {};
      var arr = [];
      this.alarmcodeJson.map(item => {
        let name = item.devname;
        data[name] = item.devtype;
        // Object.assign(data, { name: item.devtype });
      });
      for (var i in data) {
        arr.push({
          enumName: i,
          id: data[i]
        });
      }
      arr.unshift({
        enumName: "全部",
        id: ""
      });
      this.unitTypeList = arr;
      // try {
      //   const res = await GetDictDataEnum("company_type");
      //   res.unshift({
      //     enumName: "全部",
      //     id: ""
      //   });
      //   this.unitTypeList = res;
      // } catch (error) {
      //   this.$message({
      //     type: "error",
      //     message: error
      //   });
      // }
    },
    slecttype(name) {
      if (name) {
        this.unitTypeName = name;
        // console.log(name)
        this.unitTypeList.map(item => {
          console.log(item.enumName)
          // console.log(name.trim())
          // console.log(item.enumName.trim() == name.trim())
          if (item.enumName.trim() == name.trim()) {
            console.log(111111)
            console.log(item.id)
            this.unitType = item.id;
            this.GetSecurityData();
          }
        });
      } else {
        //全部
        this.unitTypeName = "";
        this.unitType = "";
        this.GetSecurityData();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.x-unit {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  .item-no {
    width: 50px;
    height: 100%;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ffffff;
    line-height: 36px;
    text-align: center;
  }
  z-index: 1000;
  .unit-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;
    .ctx-title {
      width: 200px;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
      cursor: pointer;
    }
    .isActive {
      background: rgba(114, 237, 245, 0.6);
    }
    .ctx-info {
      width: 100%;

      height: 748px;
      padding-top: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      .info-type {
        flex: 1;
        .type-title {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;
          line-height: 36px;
        }
        .type-list {
          width: 100%;
          padding: 0;
          margin-top: 26px;
          list-style: none;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          box-sizing: border-box;
          .type-list-rs {
            width: 100%;
            list-style: none;
            margin-bottom: 10px;
            .rs-name {
              width: 100%;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #e5e5e5;
              margin-bottom: 5px;
              .name {
                flex: 2;
                text-align: left;
              }
              .number {
                flex: 1;
                text-align: right;
              }
            }
            .rs-process {
              width: 100%;
              height: 6px;
              border-radius: 4px;
              background: #333333;
              .process {
                transition: width 0.3s ease-in-out;
                height: 100%;
                border-radius: 4px;
                background-image: linear-gradient(
                  270deg,
                  #68e0cf 0%,
                  #209cff 100%
                );
              }
            }
          }
        }
      }
      .info-table {
        flex: 3;
        height: 659px;
        padding-left: 40px;
        box-sizing: border-box;
        .table-rs {
          width: 100%;
          height: 562px;
          overflow-y: auto;

          .table-header {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            .header-item {
              width: 186px;
              height: 100%;
              border: none;
              outline: none;
              background: #06121d;
              border: 1px solid rgba(62, 178, 215, 0);
              border-radius: 4px;
              font-size: 14px;
              color: #fff;
              padding: 0 14px;
              box-sizing: border-box;
              .input {
                font-size: 14px;
                color: #fff;
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                background: transparent;
              }
            }
            .header-select {
              width: 300px;
              margin-right: 20px;
              height: 100%;
              background: #06121d;
              border: 1px solid rgba(62, 178, 215, 0);
              border-radius: 4px;
              font-size: 14px;
              color: #fff;
              padding: 0 14px;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .select-name {
                width: calc(100% - 20px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal;
                text-align: left;
              }
              .iconfont {
                width: 20px;
                text-align: right;
                font-size: 14px;
                color: #fff;
                font-weight: 600;
              }
            }
            .header-more {
              width: 56px;
              margin-left: 20px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #72edf5;
              line-height: 28px;
              text-decoration: underline;
            }
            .header-btn {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              width: 66px;
              height: 100%;
              background: #72edf5;
              border-radius: 4px;
              text-align: center;
              line-height: 36px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #000000;
            }
          }
          .table-list {
            width: 100%;
            list-style: none;
            padding: 0;
            margin-top: 15px;
            .list-item {
              padding: 0;
              margin: 0;
              list-style: none;
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 36px;
              &:nth-of-type(2n + 1) {
                background: #06121d;
              }
              &:nth-of-type(2n) {
                background: transparent;
              }
              .item-name {
                width: 194px;
                padding-left: 33px;
                box-sizing: border-box;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: left;
                 overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .item-devicename{
                width: 250px;
                padding-left: 13px;
                box-sizing: border-box;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

              }
              .item-post {
                width: 250px;
                padding-left: 33px;
                box-sizing: border-box;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: left;
              }
              .item-phone {
                width: 130px;
                padding-left: 33px;
                box-sizing: border-box;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: left;
              }
              .item-state {
                width: 128px;
                padding-left: 33px;
                box-sizing: border-box;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: left;
              }
            }
          }
        }
        .table-footer {
          width: 100%;
          padding-top: 60px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
